<template>
	<div class="app-container">
		<el-card class="box-card">
			<h3>券列表</h3>

			<div class="select">
				<el-select v-model="name" placeholder="请选择" clearable @change="change">
					<el-option v-for="item in options" :key="item.pid" :label="item.name" :value="item.pid">
					</el-option>
				</el-select>
			</div>
			<myTable :tabelHeader="tableHeader" :tableData="table" @tableCellClick="onMoudelMsg"></myTable>
		</el-card>


	</div>
</template>


<script>
	import myTable from '../../table';
	import {
		queryByType,
		selectQuan,
		selectAllQuan,
        statQuan
	} from '../../../api/index';
	export default {
		name: 'quanList',
		components: {
			myTable
		},
		data() {
			return {
				name: '',
				options: [],
				//表头数据
				tableHeader: [{
						type: 'text',
						value: '券名',
						key: 'name'
					},
					{
						type: 'text',
						value: '价格',
						key: 'price'
					},
					{
						type: 'text',
						value: '链接',
						key: 'url'
					},
					{
						type: 'text',
						value: '券使用状态',
						key: 'status'
					},
                    {
                        type: 'button',
                        value: '操作',
                        btnLis: [
                            {
                                name: "置顶",
                                type: 'deleteId',
                                judeKey: 'topping',
                                judeValue: '0'
                            },
                            {
                                name: "取消置顶",
                                type: 'deleteId',
                                judeKey: 'topping',
                                judeValue: '1'
                            }
                        ]
                    }
				],
				//表格数据
				table: []
			}
		},
		created() {
			this.queryByType()
			this.selectAllQuan()
		},
		methods: {
			// 切换
			change(e) {
				// this.queryByType()
				console.log(e)
				var postObj = {
					pid: e
				}
				if (!!e) {
					this.selectQuan(postObj)
				} else {
					this.selectAllQuan()
				}
			},
			//所有券
			selectAllQuan() {
				console.log('所有券')
				selectAllQuan()
					.then(res => {
						console.log(res)
						this.table.length = 0
						console.log("所有列表", res.data.quanList);
						res.data.quanList.forEach((items, i) => {
							if (items.deleted == "0") {
								items.status = "未兑换"
							} else {
								items.status = "已兑换"
							}
						})
						this.table = res.data.quanList
					})
					.catch(err => {
						console.log(err);
					});
			},
			//获取券列表
			selectQuan(postObj) {
				console.log(postObj)
				selectQuan(postObj)
					.then(res => {
						this.table.length = 0
						res.data.quanList.forEach((items, i) => {
							if (items.deleted == "0") {
								items.status = "未兑换"
							} else {
								items.status = "已兑换"
							}
						})
						this.table = res.data.quanList
					})
					.catch(err => {
						console.log(err);
					});
			},
			//获取券字典
			queryByType() {
				queryByType()
					.then(res => {
						this.options.length = 0
						this.options[0] = {
							name: "全部",
							pid: ''
						}
						console.log("字典", res);
						res.forEach((items, i) => {
							this.options.push(items);
						})
					})
					.catch(err => {
						console.log(err);
					});
			},
            //表格回调
            onMoudelMsg(item) {
                var data = item.data
                if (item.type == 'deleteId') {
                    var postObj = {
                        id: data.id,
                        topping: data.topping == 0 ? 1 : 0
                    }
                    statQuan(postObj)
                        .then(res => {
                            this.selectAllQuan()
                            this.$notify.success({
                                title: '成功',
                                message: '操作成功'
                            });
                        })
                        .catch(err => {
                            console.log(err);
                        });
                }
            },

		},

	}
</script>

<style scoped>
	.select {
		width: 150px;
		margin: 20px 0px;
	}
</style>
